<template>
  <div class="view-grid flex justify-between">
    <div :class="[`flex-${props.flex[0]}`]">{{ props.flex[0] }}</div>
    <div :class="[`flex-${props.flex[1]}`]">{{ props.flex[1] }}</div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  flex: {
    type: [Array<number>],
    default: [1, 1]
  }
});
</script>

<style lang="scss" scoped>
.view-grid {
  height: 24px;
  width: 120px;
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    height: 100%;
    &:first-child {
      background-color: #464646;
    }
    &:last-child {
      background-color: #979797;
    }
  }
}
</style>
